import { Auths } from '@/utils/types.d';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import { useModel } from 'umi';
import AppealDetailModal from './components/AppealDetailModal';
import HandleAppealModal from './components/HandleAppealModal';
import { queryAbnormalAppealList } from './service';
import type { AbnormalAppealTableItem } from './types.d';
import { AbnormalStatus } from './types.d';
import { AppealType } from './types.d';

const AbnormalAppealList = () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const auths = currUser?.auth ? new Set(currUser.auth.abnormalAppeal || []) : new Set();
  const ifModify = auths.has(Auths.MODIFY);
  const [updateVisible, setUpdateVisible] = useState<boolean>(false);
  const [detailVisible, setDetailVisible] = useState<boolean>(false);
  const [currAppeal, setCurrAppeal] = useState<AbnormalAppealTableItem | null>(null);
  const column: ProColumns<AbnormalAppealTableItem>[] = [
    {
      title: '申请单号',
      hideInForm: true,
      align: 'center',
      dataIndex: 'no',
    },
    {
      title: '车牌号码',
      hideInForm: true,
      align: 'center',
      dataIndex: 'plateNumber',
    },
    {
      title: '异常类型',
      hideInForm: true,
      align: 'center',
      dataIndex: 'type',
      valueEnum: {
        [AppealType.COLLECTOR]: '人员投诉',
        [AppealType.ORDER_EXCEPTION]: '订单异常',
        [AppealType.OTHER]: '其他',
      },
    },
    {
      title: '申诉用户名',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      dataIndex: 'userName',
    },
    {
      title: '申诉用户手机号',
      hideInForm: true,
      align: 'center',
      dataIndex: 'phone',
    },
    {
      title: '申诉时间',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'dateTime',
      dataIndex: 'appealTime',
      align: 'center',
    },
    {
      title: '申诉状态',
      hideInForm: true,
      dataIndex: 'status',
      align: 'center',
      valueEnum: {
        [AbnormalStatus.WAITING]: { text: '待处理', status: 'processing' },
        [AbnormalStatus.HANDLED]: { text: '已处理', status: 'success' },
        [AbnormalStatus.CLOSED]: { text: '已关闭', status: 'default' },
      },
    },
    {
      title: '问题描述',
      hideInForm: true,
      hideInSearch: true,
      dataIndex: 'description',
    },
    {
      title: '处理结果',
      hideInForm: true,
      hideInSearch: true,
      dataIndex: 'result',
    },
    {
      title: '操作',
      align: 'center',
      valueType: 'option',
      fixed: 'right',
      render: (_, record) => {
        if (!ifModify) {
          return [
            <a
              key={`${record.no}_detail`}
              onClick={() => {
                setCurrAppeal(record);
                setDetailVisible(true);
              }}
            >
              详情
            </a>,
          ];
        }
        if (record.status == AbnormalStatus.WAITING) {
          return [
            <a
              key={`${record.no}_detail`}
              onClick={() => {
                setCurrAppeal(record);
                setDetailVisible(true);
              }}
            >
              详情
            </a>,
            <a
              key={`${record.no}_handle`}
              onClick={() => {
                setCurrAppeal(record);
                setUpdateVisible(true);
              }}
            >
              处理
            </a>,
          ];
        } else {
          return [
            <a
              key={`${record.no}_detail`}
              onClick={() => {
                setCurrAppeal(record);
                setDetailVisible(true);
              }}
            >
              详情
            </a>,
            <a
              key={`${record.no}_handle`}
              onClick={() => {
                setCurrAppeal(record);
                setUpdateVisible(true);
              }}
            >
              修改处理结果
            </a>,
          ];
        }
      },
    },
  ];
  const ref = useRef<ActionType>();

  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '异常申诉列表',
      }}
    >
      <ProTable<AbnormalAppealTableItem>
        rowKey="no"
        columns={column}
        style={{ whiteSpace: 'nowrap' }}
        scroll={{ x: true }}
        columnEmptyText="暂无数据"
        dateFormatter="string"
        actionRef={ref}
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (params, sort) => {
          const res = await queryAbnormalAppealList(params, sort);
          return res;
        }}
      />
      {updateVisible && currAppeal && (
        <HandleAppealModal
          visible={updateVisible}
          appeal={currAppeal}
          close={() => {
            setUpdateVisible(false);
            setCurrAppeal(null);
          }}
          reload={() => {
            setUpdateVisible(false);
            setCurrAppeal(null);
            ref?.current?.reload();
          }}
        />
      )}

      {detailVisible && currAppeal && (
        <AppealDetailModal
          appeal={currAppeal}
          visible={detailVisible}
          close={() => {
            setDetailVisible(false);
            setCurrAppeal(null);
          }}
        />
      )}
    </PageHeaderWrapper>
  );
};

export default AbnormalAppealList;
